<template>
    <div class="login">
        <div class="login-filed">
            <div class="filed-title">
                <h3>账号密码登陆</h3>
            </div>
            <div class="filed-input">
                <div class="input-item">
                    <i class="iconfont">&#xe607;</i>
                    <input type="text" placeholder="账号" v-model="user.account"/>
                </div>
                <div class="input-item">
                    <i class="iconfont">&#xe615;</i>
                    <input type="password" placeholder="密码" v-model="user.password"/>
                </div>
            </div>
            <div class="filed-remember">
                <input type="checkbox"/>
                <label>记住账号密码</label>
            </div>
            <div class="filed-btn">
                <input type="button" value="登陆" @click="login"/>
            </div>
            <div class="filed-help">
                <a href="javascript:;">登陆遇到问题？</a>
            </div>
        </div>
        <div class="login-guide">
            <div class="guide-scan">
                <span>扫一扫登陆</span>
            </div>
            <div class="guide-login-type">
                <i class="iconfont">&#xe668;</i>
            </div>
            <div class="guide-regist">
                <input type="button" value="注册"/>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                guest: {
                    account: 'guest',
                    password: 'easymall'
                },
                user: {
                    account: '',
                    password: ''
                }
            }
        },
        methods: {
            login () {
                const self = this
                const data = {
                    account: this.user.account,
                    password: this.user.password
                }
                this.$http.login(data).then(res => {
                    if (res.success === true) {
                        localStorage.setItem('token', res.data.token)
                        self.goto('/index')
                        self.$Message.success('登录成功')
                    } else {
                        self.$Message.error('登录失败')
                    }
                })
            }
        },
        created () {
            const self = this
            if (this.$route.query.type === 'guest') {
                this.user = Object.create(this.guest)
                setTimeout(() => {
                    self.$Notice.info({
                        title: '欢迎体验EasyMall管理后台',
                        desc: '作为访客，系统会默认给你个一个登录帐号，但由于角色权限问题，可能部分功能无法使用，敬请谅解！ ',
                        duration: 0
                    })
                }, 1500)
            }
        }
    }
</script>

<style lang="less" scoped>
    .login {
        position: absolute;
        display: flex;
        flex-direction: column;
        top: 50%;
        right: 10%;
        transform: translateY(-50%);
        width: 350px;
        height: 400px;
        background: #fff;
        .login-filed {
            flex: 1;
            padding: 15px;
            .filed-title {
                text-align: center;
                h3 {
                    height: 60px;
                    line-height: 60px;
                    font-size: 18px;
                    color: gray;
                    font-weight: 500;
                }
            }
            .filed-input {
                padding: 10px 0px;
                .input-item {
                    display: flex;
                    height: 40px;
                    align-items: center;
                    border-bottom: 1px solid #eee;
                    i {
                        flex-basis: 30px;
                        font-size: 20px;
                        text-align: left;
                    }
                    input {
                        flex: 1;
                        box-sizing: border-box;
                        border: none;
                        outline: none;
                        border-left: 1px solid #000;
                        padding-left: 10px;
                    }
                }
            }
            .filed-remember {
                display: flex;
                padding-bottom: 15px;
                align-items: center;
                height: 20px;
                input {
                    flex-basis: 20px;
                }
                label {
                    flex: 1;
                    font-size: 14px;
                }
            }
            .filed-btn {
                padding: 10px 0px;
                input {
                    display: block;
                    width: 100%;
                    border: none;
                    padding: 10px 0px;
                    background: #3582f8;
                    color: white;
                    outline: none;
                    &:hover {
                        cursor: pointer;
                    }
                }
            }
            .filed-help {
                a {
                    color: gray;
                    font-size: 14px;
                }
            }
        }
        .login-guide {
            display: flex;
            flex-basis: 75px;
            background: #f3f8ff;
            align-items: center;
            padding: 0px 15px;
            .guide-scan {
                flex-grow: 0;
                span {
                    color: gray;
                }
            }
            .guide-login-type {
                flex: 1;
                margin-left: 15px;
                i {
                    display: inline-block;
                    width: 50px;
                    border-left: 1px solid #3582f8;
                    text-align: center;
                }
            }
            .guide-regist {
                display: flex;
                flex: 1;
                justify-content: flex-end;
                input {
                    flex-grow: 0;
                    padding: 5px 15px;
                    background: transparent;
                    border: 1px solid #3582f8;
                    outline: none;
                }
            }
        }
    }
</style>